<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/mui.min.css" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/register.css" />
	<script src="js/axios.js"></script>
	<title>注册</title>
</head>

<body>
	<div class="content">
		<div class="outside">
			<input type="text" name='tele' placeholder="请输入手机号" v-model='userTel'>
			<input type="password" name='passwrd' placeholder="请输入登录密码" v-model='userPwd'>
			<input type="password" name='pwd' placeholder="请确认登录密码" v-model='userQPwd'>
			<div class='yz'>
				<input type="text" name='yzm' placeholder="请输入验证码" v-model='userCode'>
				<button type="button" @click='codeFun'>获取验证码</button>
			</div>
			<!-- 三级联动 -->
			<div class='selected'>
				<select name="provinceData" id="provinceData" @change='cityFun' v-model='provinceData'>
					<option :value="pro.id" v-for='pro in provinceArr'>{{pro.name}}</option>
				</select>
				<select name="cityData" id="cityData" @change='areaFun' v-model='cityData'>
					<option :value="cit.id" v-for='cit in cityArr'>{{cit.name}}</option>
				</select>
				<select name="areaData" id="areaData" v-model='areaData'>
					<option :value="are.id" v-for='are in areaArr'>{{are.name == ''?'':are.name}}</option>
				</select>
			</div>
			<!-- 提交 -->
			<button type="button" @click='registerFun'>注册</button>
			<!-- 免责声明 -->
			<div class='relief'>
				<label>
					<input type="checkbox" name="check" id="" value="" class='checked' />
					<span class='mz'>免责声明</span>
				</label>
			</div>
			<!-- 返回登录 -->
			<div class='returnLogin'>
				<a href="login.html"><span>返回登录<span></a>
			</div>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/vue.js"></script>
	<script type="text/javascript" charset="utf-8">
		const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
		new Vue({
			el: '.content',
			data: {
				userTel: '',//电话
				userPwd: '',//密码
				userQPwd: '',//确认密码
				userCode: '',//验证码
				provinceArr: [],//省数组
				provinceData: '',//选中的省
				cityArr: [],//根据省返回的市数组
				cityData: '',//选中的市
				areaArr: [],//根据市返回的区数组
				areaData: ''//选中的区id
			},
			created() {
				// 获取省份
				axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/getProvinceList').then(res => {
					this.provinceArr = res.data.data
					this.provinceData = res.data.data[0].id
					this.cityFun()
				})
			},
			methods: {
				// 根据省获取市
				cityFun() {
					axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/getCityListByProvinceId', {
						provinceId: this.provinceData
					}).then(res => {
						this.cityArr = res.data.data
						this.cityData = res.data.data[0].id
						this.areaFun()
					})
				},
				// 根据市获取区
				areaFun() {
					axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/getCountyListBycityId', {
						cityId: this.cityData
					}).then(res => {
						if (res.data.code == 0) {
							this.areaArr = res.data.data
							this.areaData = res.data.data[0].id
						} else {
							this.areaArr = []
						}
					})
				},
				// 验证码
				codeFun() {
					axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/SendSms', {
						phone: this.userTel,
						type: 'number'
					}).then(res => {
						mui.toast(res.data.msg.message)
					})
				},
				//注册
				registerFun() {

					var province, city, area;
					// 选中的省
					for (var i = 0; i < this.provinceArr.length; i++) {
						if (this.provinceArr[i].id == this.provinceData) {
							province = this.provinceArr[i].name
						}
					}
					// 选中的市
					for (var i = 0; i < this.cityArr.length; i++) {
						if (this.cityArr[i].id == this.cityData) {
							city = this.cityArr[i].name
						}
					}
					// 选中的区
					for (var i = 0; i < this.areaArr.length; i++) {
						if (this.areaArr[i].id == this.areaData) {
							area = this.areaArr[i].name
						}
					}
					// 提交注册信息
					axios.post(API_PROXY + 'mingpian.32one.top/Index/Login/register', {
						account: this.userTel,
						password: this.userPwd,
						pwd: this.userQPwd,
						code: this.userCode,
						province: province,
						city: city,
						area: area
					}).then(res => {
						mui.toast(res.data.msg)
					})

				}
			}
		})
	</script>
</body>

</html>